<template>
	<view class="compass-r-box" :class="parentClass" :style="{ width: width + 'rpx', height: width + 'rpx' }">
		<!-- 中间展示内容 -->
		<view id="titlename" class="compass-r-center" :class="classCenter" @click="reset('GOTO_PRESET')">
			<uni-icons type="reload" color="#2263BF" size="30"></uni-icons>
		</view>
		<view class="compass-r-ul" :style="{ transform: `rotate(${nowRotating}deg)` }">
			<view v-for="(item, idx) in dataList" :key="idx" @touchstart="handleTouchStart(item)"
				@touchend="handleTouchEnd(item)" class="compass-r-li"
				:class="{ 'compass-li-check': primaryNode === idx }" :style="{
          width: width / 2 + 'rpx',
          height: width / 2 + 'rpx',
          transform: `rotate(${idx * intervalAngle()}deg) skew(${skew()}deg)`,
        }">
				<view>
					<text class="textview" :style="{
              width: width + 'rpx',
              height: width + 'rpx',
              transform: `skew(${-skew()}deg) rotate(${reverse()}deg)`,
              paddingTop: paddingTop + 'rpx',
			  display: 'block'
            }">
						<text class="vertical-name">
							<uni-icons type="up" color="#fff" size="30"></uni-icons>
						</text>
						<!-- <view class="vertical-name" v-if="vertical">
							111111111
						</view> -->
						<!-- <template v-else>
							<view class="text-echart" v-for="(text,index) in item.name">
								222222
							</view>
						</templ -->
					</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		onMounted,
		defineProps,ref
	} from 'vue'
	const width = '261'
	const classCenter = "compass-r-center"
	const parentClass = "compass-r-parent"
	const defaultIndex = -1
	const paddingTop = 10
	const vertical = false
	const name = '全部'
	const startAngle = 45
	const primaryNode = null //当前选中节点
	const nowRotating = ref(0)
	const isback = false
	const dataList = [{
			code: 120117,
			name: "1",
			parCode: null,
			districtId: 120117,
			type: "0",
		},
		{
			code: 120118,
			name: "2",
			parCode: null,
			districtId: 120118,
			type: "1",
		},
		{
			code: 120119,
			name: "3",
			parCode: null,
			districtId: 120119,
			type: "2",
		},
		{
			code: 120100,
			name: "4",
			parCode: null,
			districtId: null,
			type: "3",
		},
		{
			code: 120118,
			name: "5",
			parCode: null,
			districtId: 120118,
			type: "1",
		},
		{
			code: 120119,
			name: "6",
			parCode: null,
			districtId: 120119,
			type: "2",
		},
		{
			code: 120100,
			name: "7",
			parCode: null,
			districtId: null,
			type: "3",
		},

		{
			code: 120100,
			name: "8",
			parCode: null,
			districtId: null,
			type: "3",
		}

	]

	function resetCenter() {
		this.primaryNode = null
	}

	function intervalAngle() {
		let len = dataList.length;
		return 360 / len;
	}

	function skew() {
		return 90 - intervalAngle();
	}

	function reverse() {
		return -(90 - intervalAngle() / 2);
	}

	function checkNode(idx) {
		// this.primaryNode = idx;
		nowRotating.value = rotating(idx);
		// this.name = this.dataList[idx].name;
	}

	function rotating(idx) {
		let rotate = idx * intervalAngle();
		return idx === -1 ?
			this.startAngle :
			90 - rotate - intervalAngle() / 2;
	}

	function reset(cmd) {
		// {
		//       action: 0,
		//       cameraId: props.vid,
		//       command: cmd,
		//     }
	}
	let timer = null
	function handleTouchStart(cmd) {
		console.log('触摸开始');
		timer = setTimeout(() => {
			console.log('长按逻辑');
			// {
			//       action: 0,
			//       cameraId: props.vid,
			//       command: cmd,
			//     }
		}, 350);
	}

	function handleTouchEnd() {
		clearTimeout(this.timer);
		console.log('触摸结束');
		// action: 1,
		//      cameraId: props.vid,
		//      command: "LEFT",
	}
	
	onMounted(()=>{
		checkNode(0)
	})
</script>


<style lang="scss">
	.compass-r {
		position: relative;
	}

	.compass-r-box {
		box-sizing: content-box;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 100%;
		overflow: hidden;
		position: relative;
		z-index: 10;
		background: #E4EFFD;
		border: 2rpx solid #C3DCFF;

		.compass-r-center {
			width: 105rpx;
			height: 105rpx;
			overflow: hidden;
			position: relative;
			z-index: 10;
			border-radius: 100%;
			// background: #333;
			text-align: center;

			font-size: 14px;
			box-sizing: content-box;
			cursor: pointer;
			background: #fff;
			line-height: 105rpx;
		}

		.compass-r-ul {
			width: 100%;
			height: 100%;
			transform-origin: 50% 50%;
			position: absolute;
			border-radius: 100%;
			overflow: hidden;
			z-index: 9;
			left: 0;
			top: 0;
			transition: transform 0.8s linear;

			view {
				transform-origin: 100% 100%;
				position: absolute;
				left: 0;
				top: 0;
				overflow: hidden;
				box-sizing: content-box;
				font-size: 14px;
				color: #e4edff;
				background: rgba(255, 255, 255, 0);
				cursor: pointer;

				&.compass-li-check {
					background: #2263BF;

					view {
						background: #2263BF;
						// background: radial-gradient(rgba(5, 241, 255, 1) 7%,
						// 		rgba(5, 241, 255, 0.8) 35%,
						// 		rgba(5, 241, 255, 1) 37%,
						// 		rgba(13, 249, 255, 0.5) 38%,
						// 		rgba(13, 249, 255, 0.6) 38%,
						// 		rgba(13, 249, 255, 0.2) 66%);
					}
				}

				view {
					text-align: center;
					position: relative;
					box-sizing: border-box;

					&:hover {
						background: #2263BF;
					}

					.vertical-name {
						position: absolute;
						display: inline-block;
						width: 24px;
						height: 40%;
						left: 50%;
						overflow: hidden;
						color: #fff;
						margin-left: -24rpx;
						margin-top: -10rpx;
					}
				}

				view {
					// border-bottom: 1px solid rgba(111, 119, 137, 1);
					height: 100%;
					position: absolute;
					width: 100%;
					top: 0;
					left: 0;
				}

				//   .point-circle {
				//     position: absolute;
				//     left: 5px;
				//     bottom: 0px;
				//     content: "";
				//     background: rgba(138, 215, 224, 1);
				//     width: 3px;
				//     height: 3px;
				//     border-radius: 100%;
				//   }
			}
		}
	}

	.compass-r-parent {
		border: 1px solid #3cc5e4;
		// background: radial-gradient(rgba(74, 223, 255, 1),
		// 		rgba(44, 186, 226, 0.7) 20%,
		// 		rgba(15, 29, 57, 0.8) 50%,
		// 		rgba(44, 186, 226, 0.8) 90%,
		// 		rgba(10, 60, 88, 0.5));
	}

	.text-echart {
		display: inline-block;
	}
</style>